<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Textarea - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Textarea - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list>
          <ion-item>
            <ion-label color="primary">Inline Label</ion-label>
            <ion-textarea placeholder="Textarea"></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-label color="primary" position="fixed">Fixed Label</ion-label>
            <ion-textarea placeholder="Textarea"></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-textarea placeholder="Textarea with no label"></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-label color="primary" position="stacked">Stacked Label</ion-label>
            <ion-textarea placeholder="Textarea"></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-label color="primary" position="floating">Floating Label</ion-label>
            <ion-textarea id="timeout"></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-label>Disabled</ion-label>
            <ion-textarea id="dynamicDisabled" value="Disabled" disabled></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-label>Readonly</ion-label>
            <ion-textarea id="dynamicReadonly" value="Readonly" readonly></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-label position="floating">Dynamic Value</ion-label>
            <ion-textarea id="dynamicValue" value="dynamic"></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-label color="primary">Clear on Edit</ion-label>
            <ion-textarea clear-on-edit="true"></ion-textarea>
          </ion-item>

          <ion-item>
            <ion-label color="primary">Autogrow</ion-label>
            <ion-textarea auto-grow="true"></ion-textarea>
          </ion-item>
        </ion-list>

        <div class="ion-text-center">
          <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')"> Toggle Disabled </ion-button>

          <ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
            Toggle Readonly
          </ion-button>

          <ion-button color="light" onclick="toggleString('dynamicValue', 'value');"> Toggle Value </ion-button>

          <ion-button color="danger" onclick="clearString('dynamicValue', 'value');"> Clear Value </ion-button>
        </div>
      </ion-content>

      <script>
        var textarea = document.getElementById('timeout');
        setTimeout(() => {
          textarea.value = 'timeout';
        }, 1000);

        function toggleBoolean(id, prop) {
          var el = document.getElementById(id);

          var isTrue = el[prop] ? false : true;
          el[prop] = isTrue;
        }

        function toggleString(id, prop) {
          var el = document.getElementById(id);
          var newString = el[prop] === 'dynamic' ? 'changed' : 'dynamic';
          el[prop] = newString;
        }

        function clearString(id, prop) {
          var el = document.getElementById(id);

          el[prop] = '';
        }
      </script>
    </ion-app>
  </body>
</html>
